﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Elevation profile example</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
  <!-- required scripts and css -->
  <!--[if lt IE 9]><script type="text/javascript" src="scripts/excanvas.min.js"></script><![endif]-->
  <script type="text/javascript" src="scripts/jquery.min.js"></script>
  <script type="text/javascript" src="scripts/jquery.jqplot.min.js"></script>
  <script type="text/javascript" src="scripts/jqplot.cursor.min.js"></script>
  <link rel="stylesheet" type="text/css" href="styles/jquery.jqplot.min.css" />

  <script type="text/javascript">
      var map, plot, polyline;

      function GetMap() {
          map = new Microsoft.Maps.Map(document.getElementById("myMap"),
              {
                  credentials: "Your_Bing_Maps_Key",
                  center: new Microsoft.Maps.Location(40.6, -110.1),
                  zoom: 10
              });

          //Register and load the ElevationPlot Module
          Microsoft.Maps.registerModule("ElevationPlotModule", "scripts/elevationplot.js");
          Microsoft.Maps.loadModule("ElevationPlotModule", {
              callback: function () {
                  plot = new ElevationPlot(map, 'chartdiv');
                  if (polyline) {
                      plot.SetPoints(polyline.getLocations());
                  }
              }
          });

          //Initial coordinates used for pushpins
          var intialPoints = [
              new Microsoft.Maps.Location(40.6, -110.2),
              new Microsoft.Maps.Location(40.6, -110)
          ];

          //Create a polyline and add it to the map
          polyline = new Microsoft.Maps.Polyline(intialPoints);
          map.entities.push(polyline);

          //Create two draggable pushpins and add drag and dragend events.
          pin1 = new Microsoft.Maps.Pushpin(intialPoints[0], { draggable: true, text: 'S' });
          Microsoft.Maps.Events.addHandler(pin1, 'drag', PushpinDragged);
          Microsoft.Maps.Events.addHandler(pin1, 'dragend', PushpinDragEnd);
          map.entities.push(pin1);

          pin2 = new Microsoft.Maps.Pushpin(intialPoints[1], { draggable: true, text: 'E' });
          Microsoft.Maps.Events.addHandler(pin2, 'drag', PushpinDragged);
          Microsoft.Maps.Events.addHandler(pin2, 'dragend', PushpinDragEnd);
          map.entities.push(pin2);
      }

      function PushpinDragged(e) {
          //Get the coordinates of the pushpins and set the location of the polyline.
          polyline.setLocations([pin1.getLocation(), pin2.getLocation()]);
      }

      function PushpinDragEnd(e) {
          //plot the new chart
          plot.SetPoints(polyline.getLocations());
      }

  
  </script>
</head>
<body onload="GetMap();">
	<div id='myMap' style='position:relative;width:800px;height:400px;'></div><br/>
	<div id='chartdiv' style='width:800px;height:200px;'></div>
</body>
</html>
